<template>
  <el-card :bordered="false" class="storeOrderDetails">
    <el-page-header @back="$router.go(-1)" style="margin-bottom:10px"></el-page-header>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <el-card
        class="box-card"
        shadow="never"
        style="margin: 20px 0;background-color:rgba(215, 215, 215, 0.5);"
      >
        <el-row :gutter="10">
          <el-col :xs="8" :md="8">
            <el-form-item label="优惠券类型：">{{ruleForm.businessType1}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="创建人：">{{ruleForm.operatorId}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="创建时间：">{{ruleForm.createTime}}</el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!-- 门店采购信息 -->
      <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
        <div slot="header" class="clearfix">
          <h3>活动基本信息</h3>
        </div>
        <el-row :gutter="10">
          <el-col :xs="8" :md="8">
            <el-form-item label="优惠券名称：">{{ruleForm.couponName}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="发放总量：">{{ruleForm.couponNum}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="活动状态：">{{ruleForm.activityStatus | activityStatus}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item
              label="领取时间："
            >{{(ruleForm.activityBegintime?ruleForm.activityBegintime:'') + ' - ' + (ruleForm.activityEndtime?ruleForm.activityEndtime:'') }}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item
              label="用券有效期"
            >{{ruleForm.couponBegintime + ' - ' + ruleForm.couponEndtime}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="使用渠道：">{{ruleForm.saleScope | saleScope}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="领取人限制：">{{ruleForm.receiveLimit?ruleForm.receiveLimit:'不受限制'}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="每人限领次数：">{{ruleForm.receiveNum}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="活动描述：">{{ruleForm.activityDec}}</el-form-item>
          </el-col>
        </el-row>
        <!-- <h3>采购商品明细</h3>
        <buyingIfor ref="buyingIfor" style="margin:10px 0px 10px 10px" />-->
      </el-card>

      <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
        <div slot="header" class="clearfix">
          <h3>规则设置</h3>
        </div>
        <el-row :gutter="10">
          <el-col :xs="8" :md="8">
            <el-form-item
              label="优惠条件："
            >{{ruleForm.fullAmount?'满金额'+ ruleForm.discountAmount+ '元': '无条件'}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item
              label="优惠内容："
            >{{ruleForm.discountAmount?'减免'+ ruleForm.discountAmount+ '元': '享受' + ruleForm.discount + '折'}}</el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
        <div slot="header" class="clearfix">
          <h3>关联店铺</h3>
        </div>
        <buyingIfor
          ref="buyingIfor"
          style="margin:10px 0px 10px 10px"
          :loadData="ruleForm.couponShopList"
          :number="ruleForm.number"
        />
      </el-card>
      <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
        <div slot="header" class="clearfix">
          <h3>关联商品</h3>
        </div>
        <buyingIfor1
          ref="buyingIfor"
          style="margin:10px 0px 10px 10px"
          :loadData="ruleForm.couponGoodsList"
          :number="ruleForm.number"
        />
      </el-card>
      <div class="content">
        <el-button @click="quxiao('ruleForm')">返 回</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script src='./index.js'></script>

<style lang="scss">
.storeOrderDetails {
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
  .mdweizhi {
    display: flex;
    .jwd {
      span {
        padding-right: 10px;
      }
      .el-form-item__label {
        text-align: right;
        width: 50px !important;
      }
      .el-form-item__content {
        margin-left: 0px !important;
        margin-right: 20px;
      }
    }
  }
  .box-card {
    .header_title {
      background: rgba(102, 204, 102, 1);
      display: inline-block;
      padding: 5px 10px;
      color: #fff;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    h3 {
      margin: 0;
    }
  }
}
</style>
